<!DOCTYPE html>
<!-- Copyright (C) 2020  Matthew "strager" Glazar -->
<!-- See end of file for extended copyright information. -->
<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }

  body {
    color: #ffffff;
    background-color: #000000;
  }

  body {
    display: grid;
    grid-template-areas:
      "header"
      "main";
    grid-template-rows: max-content auto;
    height: 100vh;
  }
  header {
    grid-area: header;
  }
  main {
    grid-area: main;
    overflow-y: hidden;
  }
  main > section {
    height: 100%;
    overflow-y: auto;
  }

  #vector-profile-data {
    display: flex;
    flex-wrap: wrap;
  }

  .max-size-histogram {
    margin: 0.5rem;
    max-size: 33%;
  }

  .histogram table {
    width: 100%;
  }

  .histogram td {
    --bar-color: #882222;
    --histogram-percentage: 0%;
    background: linear-gradient(
      90deg,
      var(--bar-color) 0%,
      var(--bar-color) var(--histogram-percentage),
      transparent var(--histogram-percentage),
      transparent 100%
    );
  }

  #tool-bar {
    display: grid;
    grid-template-areas: "tabs upload";
  }
  #tool-bar .tab-bar {
    grid-area: tabs;
  }
  #tool-bar #attach-trace {
    grid-area: upload;
  }

  #tool-bar #attach-trace {
    align-self: center;
    justify-self: end;
  }

  #tool-bar {
    --bottom-border-width: 1px;
    --active-background-color: #000000;
    --border-color: #ffffff;

    border-bottom: var(--bottom-border-width) solid var(--border-color);
  }
  .tab-bar {
    display: flex;
    margin: 0;
    padding: 0 1rem;
  }
  .tab-bar > li {
    list-style-type: none;
    padding: 0;
  }
  .tab-bar > li > a {
    background-color: #222222;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    padding: 0.5rem 1rem;
    text-decoration: none;
  }
  .tab-bar > li:not(:first-child) > a {
    border-left: 0;
  }
  .tab-bar > li > a.active {
    background-color: var(--active-background-color);
    border-bottom: var(--bottom-border-width) solid
      var(--active-background-color);
    margin-bottom: calc(-1 * var(--bottom-border-width));
  }

  .tabbed-container > .tab:not(.active) {
    display: none !important;
  }

  #lsp-log {
    display: grid;
    grid-template-areas:
      "title details"
      "log details";
    grid-template-columns: 30% auto;
  }
  #lsp-log h2 {
    grid-area: title;
  }
  #lsp-log #lsp-log-data {
    grid-area: log;
  }
  #lsp-log #lsp-log-details {
    grid-area: details;
  }

  #lsp-log {
    overflow-y: initial;
  }
  #lsp-log #lsp-log-data,
  #lsp-log #lsp-log-details {
    overflow-y: scroll;
  }

  #lsp-log ol {
    margin: 0;
    padding: 0;
  }
  #lsp-log li {
    list-style-type: none;
  }

  #lsp-log .lsp-message {
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0.25rem;
  }
  #lsp-log .lsp-message.lsp-notification {
    background-color: #333366;
  }
  #lsp-log .lsp-message summary {
    font-weight: bold;
    margin-top: 0;
  }

  #lsp-log .lsp-message {
    border: 2px solid transparent;
  }
  #lsp-log .lsp-message.selected {
    border-color: #999999;
  }

  #lsp-log .lsp-params {
    margin: 0.5rem;
  }
  #lsp-log .lsp-params dd {
    white-space: pre;
  }

  #lsp-state {
    display: grid;
    grid-template-areas: "documents details";
    grid-template-columns: 30% auto;
  }
  #lsp-state .lsp-documents {
    grid-area: documents;
  }
  #lsp-state .lsp-details {
    grid-area: details;
  }

  #lsp-replay {
    display: grid;
    grid-template-areas:
      "documents details"
      "log log";
    grid-template-columns: 30% auto;
    grid-template-rows: 70% 30%;
  }
  #lsp-replay .lsp-documents {
    grid-area: documents;
    overflow-y: auto;
  }
  #lsp-replay .lsp-details {
    grid-area: details;
    overflow-y: auto;
  }
  #lsp-replay .lsp-replay-log {
    grid-area: log;
    overflow-y: scroll;
  }

  ul.lsp-documents {
    margin: 0;
    padding: 0;
  }
  ul.lsp-documents li {
    list-style-type: none;
  }

  .lsp-document {
    background-color: #113311;
    border-radius: 0.5rem;
    margin: 0.25rem;
    padding: 0.5rem;
  }

  .lsp-document {
    border: 2px solid transparent;
  }
  .lsp-document.selected {
    border-color: #999999;
  }

  .lsp-replay-log table {
    width: 100%;
  }

  .lsp-replay-log table tr td {
    border: 1px solid transparent;
  }
  .lsp-replay-log table tr.selected td {
    border-color: #999999;
  }
</style>

<body>
  <header>
    <nav id="tool-bar">
      <ul class="tab-bar">
        <li><a href="#/server-info">info</a></li>
        <li><a href="#/lsp-log">LSP log</a></li>
        <li><a href="#/lsp-state">LSP state</a></li>
        <li><a href="#/lsp-replay">LSP replay</a></li>
        <li><a href="#/vector-profile">vector profile</a></li>
      </ul>
      <form id="attach-trace">
        <input type="file" name="trace" multiple />
      </form>
    </nav>
  </header>

  <main class="tabbed-container">
    <section id="server-info" class="tab">
      <dl></dl>
    </section>

    <section id="lsp-log" class="tab">
      <ol id="lsp-log-data"></ol>
      <div id="lsp-log-details">
        <dl id="lsp-log-params"></dl>
      </div>
    </section>

    <section id="lsp-state" class="tab">
      <ul class="lsp-documents"></ul>
      <div class="lsp-details">
        <dl>
          <dt>Language ID</dt>
          <dd class="lsp-language-id"></dd>
        </dl>
        <pre class="lsp-document-text"></pre>
      </div>
    </section>

    <section id="lsp-replay" class="tab">
      <ul class="lsp-documents"></ul>
      <div class="lsp-details">
        <dl>
          <dt>Language ID</dt>
          <dd class="lsp-language-id"></dd>
        </dl>
        <pre class="lsp-document-text"></pre>
      </div>
      <div class="lsp-replay-log">
        <table>
          <thead>
            <tr>
              <th>method</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </section>

    <section id="vector-profile" class="tab">
      <div id="vector-profile-data"></div>
    </section>
  </main>

  <script type="module" src="index.mjs"></script>
</body>

<!--
quick-lint-js finds bugs in JavaScript programs.
Copyright (C) 2020  Matthew "strager" Glazar

This file is part of quick-lint-js.

quick-lint-js is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

quick-lint-js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
-->
